<section ng-init="init()" id="sio-messenger"
    
>
<!-- Chat Widget start -->
<div class='ui' ng-onload="loadMsgButton()">
                   
            <div class='widget'ng-class="{'hidden': isHide}">
            <div class='widget-header'>
                <div ng-if="!user.loggedIn" class="row" style="margin-right: 0px;margin-left: 0px;">
                        <a href="#" ng-click="login()">Login</a>
                </div>                
                <div ng-if="user.loggedIn" class="row" style="margin-right: 0px;margin-left: 0px;">
                    <a class="col-9">Messenger ({{members.length}})</a>                     
                    <a class="col-1" ng-click="toggle()"><i class="fa fa-minus"></i></a>
                    <a class="col-1" ng-click="toggleContact()"><i class="fas fa-users"></i></a>
                    <a class="col-1" ng-click="logout()"><i class="fas fa-sign-out-alt"></i></a>
                </div>
            </div>
            <div ng-if="user.loggedIn" class='widget-conversation'>
                <div ng-if="user.loggedIn" class="container">
                    <div id="sio-discussion" class="discussion">
                        
                        <div class="row" ng-repeat="msg in messages">
                            
                            <li ng-class="{ 'message-right': msg.connection.id == user.info.id , 'message-left': msg.connection.id != user.info.id }"">
                                <div class='message-avatar'>
                                <img class='avatar' ng-src="{{msg.connection.avatar}}" >
                                
                                </div>
                                <div class='name'>{{msg.connection.name}}</div>
                                <div class='message-text'>{{msg.content}}</div>
                                <div class='message-hour'>{{msg.createdDate | utcToLocal:'dd.MM.yyyy hh:mm:ss'}}<span class='ion-android-done-all'></span></div>
                            </li>   
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <div ng-if="user.loggedIn" class='widget-form'>
                <textarea id='message' class="msgContent" minlength="1" placeholder="message" ng-enter="sendMessage()" ng-model="message.content"></textarea>
                <button class="sendMsgBtn" ng-click="sendMessage()"><i class="fas fa-paper-plane"></i></button>
            </div>              
            <div ng-if="user.loggedIn" class="contact" ng-class="{'collape': hideContact}">
                <ul>
                    <li ng-repeat="m in members">
                        <img imageonload ng-src="{{m.avatar}}" />  <span ng-bind="m.name"></span>
                    </li>
                </ul>
            </div>
        </div>        
        </div>
        <a ng-if="user.loggedIn" class='btn-support' ng-click="toggle()" id="quest"><i class="fab fa-facebook-messenger"></i></a>
        <a ng-if="!user.loggedIn" class='btn-support' ng-click="login()" id="quest"><i class="fab fa-facebook-messenger"></i></a>
     
      </div>
<!-- Chat Widget end -->
    <!-- <div class="card-header">
        <h6>Messenger</h6> 
        <a class="btn btn-contact btn-success" ng-click="toggleContact()">Available({{members.length}})</a>
        <a class="btn btn-toggle btn-info" ng-click="toggle()"><i ng-class="{'fa-minus': !isHide ,'fa-plus': isHide}" class="fa fa-minus"></i></a>
    </div>
    <div class="row card-body">
        <div class="col-12">
            </h1>
            <div ng-if="!user.loggedIn">
                <a href="#" ng-click="login()">Login</a>
            </div>
            <div ng-if="user.loggedIn" class="container">
                <div id="sio-discussion" class="discussion">
                    <div class="row" ng-repeat="msg in messages">
                        <div class="col-md-12" ng-class="{ 'text-right': msg.connection.id == user.info.id }">
                            <img imageonload src="{{msg.connection.avatar}}" /> <b class="small">{{msg.connection.name}}</b>
                            <br /><span class="small" ng-bind="msg.createdDate | utcToLocal:'dd.MM.yyyy hh:mm:ss'"></span>
                            <p ng-bind-html="msg.content"></p>
                        </div>
                    </div>
                </div>
                <div class="action">
                    <textarea placeholder="message" ng-enter="sendMessage()" class="form-control" ng-model="message.content"></textarea>
                    <a class="btn btn-info" ng-click="sendMessage()">Send</a>
                </div>
            </div>
        </div>
        <div class="contact" ng-class="{'collape': hideContact}">
            <ul>
                <li ng-repeat="m in members">
                    <img imageonload src="{{m.avatar}}" />  <span ng-bind="m.name"></span>
                </li>
            </ul>
        </div>
    </div> -->
</section>
<!-- /.content -->
